<template>
  <div id="header" class="header" :style="!routerflage ? 'height:140px;' : ''">
    <div class="headernav">
      <div class="nav_lfet">
        <img src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/logo.png" alt="" />
      </div>
      <div class="nav_center">
        <ul>
          <li v-for="(item, index) in navarr" :key="index">
            <router-link style="color: #fff" :to="{ path: item.url }">
              {{ item.name }}
            </router-link>
          </li>
        </ul>
      </div>
      <div v-show="user" class="nav_right">
        <router-link :to="{ name: 'login' }" style="color: #fff"
          >登录/注册</router-link
        >
      </div>
      <div
        @mouseenter="personalTrue"
        @mouseleave="personalFalse()"
        v-show="!user"
        class="nav_right"
      >
        {{ this.userName }}
      </div>
      <transition name="fade">
        <ul
          v-show="personalShow"
          class="myinfo"
          @mouseenter="personalTrue"
          @mouseleave="personalFalse()"
        >
          <div class="usernamepersonal_username">账号：{{ this.userName }}</div>
          <div class="usernamepersonal_list">
            <li>
              <i class="iconfont icon-kebiao" style="font-size: 17px"></i>
              <span>
                <router-link :to="{ name: 'streamingytable' }"
                  >我的课程</router-link
                >
              </span>
            </li>
            <li>
              <i class="iconfont icon-jinbi" style="font-size: 17px"></i>
              <span>
                <router-link :to="{ name: 'learnM' }">我的学米</router-link>
              </span>
            </li>
            <li style="padding-left: 20px">
              <i class="iconfont icon-ren" style="font-size: 22px"></i>
              <span style="margin-left: -5px">
                <router-link :to="{ name: 'personal' }">个人中心</router-link>
              </span>
            </li>
            <li>
              <i class="iconfont icon-xiazai3"></i>
              <span>
                <router-link :to="{ name: 'downrecord' }">我的下载</router-link>
              </span>
            </li>
            <li>
              <i class="iconfont icon-xingxing1"></i>
              <span>
                <router-link :to="{ name: 'myfavorite' }">我的收藏</router-link>
              </span>
            </li>
            <li>
              <i class="iconfont icon-huiyuancopy"></i>
              <span>
                <router-link :to="{ name: 'VIPCenter' }">我的VIP</router-link>
              </span>
            </li>
          </div>
          <div class="usernameprsonal_zxlogi" @click="clearUser()">
            退出登录
          </div>
        </ul>
      </transition>
    </div>
    <div class="header_center" v-show="routerflage">
      <div>
        <span>编辑出版期刊联盟平台</span>
        <p>Editing And Publishing journal Alliance Platform</p>
      </div>
    </div>
    <div class="header_footer" v-show="routerflage">
      <div class="inputbox">
        <select
          placeholder="请输入搜索内容"
          v-model="couponSelected"
          @change="getCouponSelected"
        >
          <option
            :value="coupon.id"
            v-for="(coupon, index) in couponList"
            :key="index"
          >
            {{ coupon.name }}
          </option>
        </select>
        <p />
        <input
          type="text"
          placeholder="请输入搜索内容"
          v-model.trim="searchKey"
          @keyup.enter.native="searchss"
        />
        <div class="iconfont icon-fangdajing sousuo" @click="searchss()"></div>
      </div>
      <p>
        热搜词:
        <span v-for="(item, index) in allSearch" :key="index" @click="allSearches(item)">{{item}}</span>
      </p>
    </div>
  </div>
</template>

<script>

export default {
  // 局部刷新
  // inject: ["reload"],
  data() {
    return {
      navarr: [
        {
          name: "首页",
          url: "/home",
          id: 1,
        },
        {
          name: "学术期刊",
          url: "/periodical",
          id: 2,
        },
        {
          name: "学术论文",
          url: "/academic",
          id: 3,
        },
        {
          name: "最新动态 ",
          url: "/dynamic",
          id: 4,
        },
        {
          name: "最新研究",
          url: "/research",
          id: 5,
        },
        {
          name: "行业政策",
          url: "/policy",
          id: 6,
        },
        {
          name: "会议培训",
          url: "/meeting",
          id: 7,
        },
        {
          name: "品牌栏目",
          url: "/column",
          id: 8,
        },
        {
          name: "直播课堂",
          url: "/streaming",
          id: 9,
        },
      ],
      couponList: [
        {
          id: "0",
          name: "年份",
        },
        {
          id: "1",
          name: "2019年",
        },
        {
          id: "2",
          name: "2018年",
        },
        {
          id: "3",
          name: "2017年",
        },
      ],
      searchKey: "",
      couponSelected: "",
      userInfo: "",
      user: true,
      routerflage: this.$route.path == "/home",
      userName: this.$sessionStorage.getItem("userName"),
      personalShow: false, //弹窗判断
      allSearch: "",
    };
  },
  methods: {
      allSearches(item) {
      this.$uniRouter.push({
        path: "/search",
        query: {
          whereName: item,
        },
      });
    },
    getSear() {
      // 获取搜索
      this.$httphelper.get("/api/Lm/GetSearchKeyWords")
        .then((res) => {
          this.allSearch = res.data.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 全局搜索
    allSearches(name) {
      this.$uniRouter.push({
        path: "/pages/search/index",
        query: {
          whereName: name,
        },
      });
    },
    // 搜索
    searchss() {
      this.$uniRouter.push({
        path: "/pages/search/index",
        query: {
          whereName: this.searchKey,
        },
      });
    },
    // 个人中心弹框
    personalTrue() {
      if (this.userName == null) {
        this.personalShow = false;
      } else {
        this.personalShow = true;
      }
    },
    personalFalse() {
      this.personalShow = false;
    },
    getCouponSelected() {
      //获取选中类型
      console.log(this.couponSelected);
    },
    //退出登录
    clearUser() {
      // sessionStorage.removeItem('userName');
      localStorage.clear();
      sessionStorage.clear();
      this.$uniRouter.push({
        path: "/home",
      });
      // this.reload();
      this.user = false;
      this.userName = "";
    },
  },
  created() {
    this.getSear();
    this.userInfo = this.$sessionStorage.getItem("userName");
    if (this.userInfo) {
      this.user = false;
    }
    this.couponSelected = this.couponList[0].id;
  },
  // destroyed () {
  //   console.log(destroyed)
  // }
};
</script>

<style lang="less" scoped>
.header {
  height: 480px;
  background-image: url("https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/headimg.png");
  background-size: 101% 480px;
  background-repeat: no-repeat;

  .headernav {
    width: 1436px;
    margin: 0 auto;
    padding-top: 41px;
    display: flex;
    justify-content: space-between;
    position: relative;
    .nav_lfet {
      img {
        width: 227px;
        height: 66px;
      }
    }
    .nav_right {
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
      line-height: 69px;
      cursor: pointer;
    }
    .nav_center {
      width: 927px;
      ul {
        display: flex;
        justify-content: space-between;
        line-height: 69px;
        li {
          list-style: none;
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
  }
  .header_center {
    div {
      color: #fff;
      width: 615px;
      margin: 35px auto;
      span {
        font-size: 61px;
      }
      p {
        font-size: 29px;
      }
    }
  }
  .header_footer {
    .inputbox {
      width: 925px;
      margin: 0 auto;
      height: 50px;
      display: flex;
      background: #fff;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      select {
        border: none;
        outline: none;
        height: 50px;
        width: 110px;
        margin-left: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #2a2d3e;
      }
      /*清除iIE的默认选择框样式*/
      select::-ms-expand {
        display: none;
      }
      p {
        border: 1px #dbdbdb solid;
        height: 30px;
        width: 1px;
        line-height: 30px;
        margin-top: 10px;
        margin-left: 10px;
      }
      input {
        outline: none;
        border: none;
        height: 50px;
        width: 733px;
        padding-left: 10px;
        padding-top: 3px;
      }
      .sousuo {
        text-align: center;
        width: 60px;
        background: #941717;
        cursor: pointer;
        line-height: 50px;
        color: #fff;
        font-size: 18px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      input::-webkit-input-placeholder {
        font-size: 16px;
      }
    }
    p {
      width: 900px;
      margin: 0 auto;
      color: #fff;
      font-size: 14px;
      margin-top: 20px;
      span {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
.myinfo {
  position: absolute;
  right: 5px;
  top: 90px;
  background: #fff;
  border-radius: 10px;
  z-index: 999;
}
.usernamepersonal_username {
  width: 100%;
  height: 55px;
  background: #fcb7b7;
  font-size: 12px;
  color: #1f228c;
  text-align: center;
  line-height: 55px;
  border-radius: 10px 10px 0 0;
}
.usernamepersonal_list {
  height: auto;
  margin-left: 6px;
  width: 94%;
  border-bottom: 1px solid #bfbfbf;
  li {
    list-style: none;
    padding-left: 20px;
    // padding-right: 29px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    cursor: pointer;
    i {
      font-size: 16px;
      padding-right: 10px;
      color: #000;
    }
    span {
      font-size: 16px;
      color: #000;
      a {
        font-size: 16px;
        color: #000;
      }
    }
  }
}
.usernameprsonal_zxlogi {
  width: 84px;
  height: 29px;
  background: #003c80;
  color: #ffffff;
  text-align: center;
  line-height: 29px;
  // float: left;
  margin: 13px 0;
  margin-left: 43px;

  cursor: pointer;
}
@media screen and (max-width: 1010px) {
  #header {
    display: none;
  }
}
@media (max-width: 1460px) and (min-width: 1010px) {
  .nav_center {
    width: 68% !important;
  }
  .headernav {
    width: 100% !important;
  }
  .nav_lfet {
    // display: none;
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>